<template>
	<view class="content-baisc-layout">
		<view class="content-area">
			<view class="header-area">
				<u-navbar :titleSize="34" title="产品详情" back-icon-color="#000" :border-bottom="false" :background="{
					background:'url(https://resource.lanbaozixun.com/uploads/images/202406151200573edf76650.png) no-repeat',
					backgroundSize:'100%'
					}" title-color="#000">
				</u-navbar>

				<view class="product-basics-info u-margin-20">
					<view
						class="row items-start u-padding-top-32 u-padding-left-28 u-padding-right-28 u-padding-bottom-52">
						<view class="row u-flex-1 u-col-top">
							<u-avatar :src="information.image" mode="square" class="logo"></u-avatar>
							<view class="u-flex-1 u-padding-left-20">
								<view class="lg u-font-weight-500 u-line-1">
									{{information.title||''}}
								</view>
								<view class="row u-margin-top-6 u-text-center"
									v-if="information.settlement_interval || information.scope_credit">
									<view class="u-padding-right-20 u-text-left" v-if="information.settlement_interval">
										<view class="nr u-color-FF5733">{{information.settlement_interval||''}}</view>
										<view class="xs u-color-666666">结算周期</view>
									</view>
									<view v-if="information.scope_credit" class="u-text-left u-padding-left-45">
										<view class="nr u-color-FF5733">{{information.scope_credit||''}}</view>
										<view class="xs u-color-666666">授信范围</view>
									</view>
								</view>
							</view>
						</view>
						<view class="row">
							<view class="u-text-center u-padding-right-10">
								<u-icon name="bell-fill" color="#88A6BD" size="40"></u-icon>
								<view class="xs">提醒</view>
							</view>
							<view class="u-text-center u-padding-left-10">
								<u-icon name="star-fill" color="#88A6BD" size="40"></u-icon>
								<view class="xs ">收藏</view>
							</view>
						</view>
					</view>
					<u-gap height="2" bg-color="rgba(1,0,0,.05)"></u-gap>
					<view class="row u-padding-top-25 u-padding-bottom-25"
						v-if="information.annual_interest_rate || information.mode_repayment || information.allotted_time">
						<view v-for="(v,k) in loanChargeInformation" :key="k" class="row row-center u-text-center u-flex-1 w-1-3 u-padding-left-20 u-padding-right-10" v-if="information.annual_interest_rate">
							<image :src="'../../static/images/product/info/' + v.icon" mode="aspectFill" class="icon-sm" />
							<text class="nr u-padding-left-10 u-color-000000 u-line-1">{{information[v.key]||''}}</text>
						</view>
					</view>
				</view>
				<view class="u-flex u-padding-30 bg-white u-margin-left-20  u-margin-right-20 br10 ">
					<view class="u-flex-1 u-text-center">
						<view class="bold">{{information.visit||0}}</view>
						<view class="u-padding-top-10 nr u-color-666666">产品浏览量</view>
					</view>
					<view class="u-flex-1 u-text-center">
						<view class="bold">{{information.apply_count||0}}</view>
						<view class="u-padding-top-10 nr u-color-666666">产品申请量</view>
					</view>
				</view>
				<view class="u-margin-left-20 u-margin-right-20 u-margin-top-30 bg-white u-border-radius-10 u-flex u-flex-wrap u-padding-top-20 u-padding-bottom-20">
					<view v-for="(item,index) in information.function" :key="index" @click="item.type == 1?goPage(item.like):exploit()" class="w-1-4 u-text-center">
						<u-icon :name="item.icon" size="54"></u-icon>
						<view class="u-padding-top-10 nr">{{item.name}}</view>
					</view>
				</view>

				<!-- <view
					class="row-between items-stretch u-margin-left-20 u-margin-right-20 u-margin-top-30 award-area u-padding-bottom-20"
					v-if="information.user_brokerage || information.vip_brokerage || information.subordinate_brokerage">
					<view class="flex-1 award-item sm u-flex-col u-row-between">
						<view class="lg title white">直推佣金</view>
						<view class="xs u-margin-top-15 u-color-666666">直推佣金</view>
						<view class="md u-font-weight-500 u-padding-top-5 u-color-FF8103 din-font">
							{{information.user_brokerage||'0.00%'}}
						</view>
						<view class="xs u-margin-top-20 u-color-666666">最高</view>
						<view class="md u-font-weight-500 u-padding-top-5 u-color-FF8103 din-font">
							{{information.user_the_highest_brokerage||'0元'}}
						</view>
						<u-button plain type="primary" size="mini" :custom-style="{
								color: '#194AC2 !important',
								width:'60%',
								margin:'20rpx 20% 0'
							}" shape="circle">当前享有</u-button>

					</view>
					<view class="flex-1 award-item sm u-flex-col u-row-between" v-if="information.vip_brokerage">
						<view class="lg title white">
							直推佣金
						</view>
						<view class="xs u-margin-top-15 u-color-666666">放款返</view>
						<view class="md u-font-weight-500 u-padding-top-5 u-color-FF8103 din-font">
							{{information.vip_brokerage||'0.00%'}}
						</view>
						<view class="xs u-margin-top-20 u-color-666666">最高</view>
						<view class="md u-font-weight-500 u-padding-top-5 u-color-FF8103 din-font">
							{{information.vip_the_highest_brokerage||'0元'}}
						</view>
						<u-button v-if="userInfo.is_vip != 1" @click="goPage('/pages/user_vip/user_vip')" type="primary"
							size="mini" :custom-style="{backgroundColor: '#2C60DE',marginTop:'20rpx'}"
							shape="circle">去升级</u-button>
						<u-button v-else plain type="primary" size="mini" :custom-style="{
								color: '#194AC2 !important',
								width:'60%',
								margin:'20rpx 20% 0'
								}" shape="circle">当前享有</u-button>
					</view>
					<view class="flex-1 award-item sm u-flex-col u-row-between">
						<view class="lg title white">下级提成</view>
						<view class="xs u-margin-top-15 u-color-666666">放款返</view>
						<view class="md u-font-weight-500 u-padding-top-5 u-color-FF8103 din-font">
							{{information.subordinate_brokerage||'0.00%'}}
						</view>
						<view class="xs u-margin-top-20 u-color-666666">最高</view>
						<view class="md u-font-weight-500 u-padding-top-5 u-color-FF8103 din-font">
							{{information.subordinate_the_highest_brokerage||'0元'}}
						</view>
						<u-button type="primary" size="mini" :custom-style="{
							backgroundColor: '#FFA44A !important',
							width:'60%',
							margin:'20rpx 20% 0'
							}" shape="circle" @click="goPage('/pages/bundle/invite_fans/invite_fans')">招募下级</u-button>
					</view>
				</view> -->
			</view>
			<view class="content-area u-margin-bottom-20">
				<view v-for="(item,index) in contentLIsts" :key="index"
					class="content-item bg-white u-border-radius-10 u-margin-left-20 u-margin-right-20 u-margin-top-20 u-padding-20">
					<view class="title u-margin-bottom-20">{{item.name}}</view>
					<image v-if="item.type == 'qr_code'" show-menu-by-longpress :src="item.content" mode="widthFix"
						style="width: 80%;height: 400rpx;margin: 20rpx 10%;" class="u-border-radius-10"></image>
					<u-parse v-else-if="item.type == 'html'" :html="item.content||''" class="item-container"></u-parse>
				</view>
			</view>
		</view>
		<view class="footer-area bg-white">
			<view class="row u-padding-top-20 u-padding-bottom-20">
				<view class="ml20 u-text-center" v-if="information.customer_service"
					@click="customerServiceShowStatus = true">
					<u-icon name="https://resource.lanbaozixun.com/uploads/images/20240629224754325841029.png" size="55"></u-icon>
					<view class="xs">联系客服</view>
				</view>
				<view class="ml20 u-text-center" v-if="information.error_code_status > 0"
					@click="goPage('/pages/product/article/index?id=' + id)">
					<u-icon name="https://resource.lanbaozixun.com/uploads/images/20240629224754cb8b55950.png" size="55"></u-icon>
					<view class="xs">错误码</view>
				</view>
				<view v-if="information.source_type == 1" @click="quickApplication" class="ml20 u-font-weight-500 u-flex-1 u-text-center mr20 nr white fast-application-button">
					面单客户生成直码
				</view>
				<view @click="recommendationApplication"
					class="ml20 u-font-weight-500 u-flex-1 u-text-center mr20 nr white recommendation-application-button">
					{{recommendationApplicationButtonDesc()}}
				</view>
			</view>
			<view class="u-padding-top-20 u-padding-bottom-20 u-text-center">
				您是第{{information.visit||0}}位访问者
			</view>
		</view>
		<u-popup v-model="customerServiceShowStatus" mode="center" border-radius="14" width="70%" >
			<view class="relative u-text-center">
				<image class="customer-bg" src="https://resource.lanbaozixun.com/uploads/images/202408112152289ff843960.png" mode="widthFix"></image>
				<view class="bg-white u-border-radius-20 customer-qr-code-area u-padding-10">
					<image :src="information.customer_service" mode="widthFix" show-menu-by-longpress class="customer-qr-code"></image>
				</view>
				<u-icon name="close-circle" color="#FFF" size="70" class="u-margin-top-20" @click="customerServiceShowStatus = false"></u-icon>
			</view>
		</u-popup>
		<product-apply-form v-if="information.source_type == 1" v-model="productApplyFormStatus" :id="information.id"></product-apply-form>
		<product-apply-form-tow v-else-if="[2,3].indexOf(information.source_type) != -1" :openType="information.open_type" :productType="information.source_type" :fields="information.apply_field_convert" v-model="productApplyFormStatus" :id="information.id"></product-apply-form-tow>
		<u-popup v-model="showService" mode="center">
			<view class="column-center">
				<image src="https://resource.lanbaozixun.com/uploads/images/20240623224203208432603.png" mode="widthFix" class="advertising"></image>
				<view class="mt30">
					<u-icon name="close-circle" color="#FFF" size="50" @click="showService=false"></u-icon>
				</view>
			</view>
		</u-popup>
		<xy-loading v-if="loadingShowStatus"></xy-loading>
		<hint-buy-vip-message ref="hintBuyVip"></hint-buy-vip-message>
		<navigator v-if="information.source_type == 1" hover-class="none" @click="gofast" class="hover-button white bold xxs u-flex">
			快捷<br/>
			申请
		</navigator>
	</view>
</template>
<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		menuJump
	} from '@/utils/tools'
	import {
		getHelpInfo,
		createCustomer
	} from '@/api/new';
	import {
		createOrder
	} from '@/utils/order'
	import Cache from '@/utils/cache'
	import wechath5 from '@/utils/wechath5'
	export default {
		data() {
			return {
				id: 0,
				information: {},
				contentLIsts: [],
				showService:false,
				loadingShowStatus:true,
				productApplyFormStatus:false,
				customerServiceShowStatus: false,
				loanChargeInformation:[
					{
						'icon':'d1.png',
						'key':'annual_interest_rate'
					},
					{
						'icon':'d2.png',
						'key':'mode_repayment'
					},
					{
						'icon':'d3.png',
						'key':'allotted_time'
					}
				]
			}
		},
		onLoad(e) {
			this.id = e.id;

			if (this.$u.test.isEmpty(e.id)) {
				this.$u.toast('参数异常');
				setTimeout(() => {
					uni.redirectTo({
						url: '/pages/product/centre'
					})
				}, 800)
			} else {
				this.getUser();
				this.queryProductInformationFun()
			}
		},
		onShareTimeline() {
			const shareInfo = Cache.get('shareInfo')
			return {
				title: this.information.title,
				path: `https://dtm.lanbaozixun.com/mobile/pages/product/info?id=${this.information.id}&invite_code=${this.inviteCode}`,
				imageUrl: this.information.image,
			};
		},
		onShareAppMessage() {
			const shareInfo = Cache.get('shareInfo')
			return {
				title: this.information.title,
				path: `https://dtm.lanbaozixun.com/mobile/pages/product/info?id=${this.information.id}&invite_code=${this.inviteCode}`,
				imageUrl: this.information.image,
			};
		},
		methods: {
			...mapActions(['getUser']),
			async queryProductInformationFun() {
				const _this = this;

				let {
					id
				} = _this;

				let {
					code,
					data
				} = await getHelpInfo({
					id
				});

				if (code == 1) {
					_this.information = data;
					
					const option = {
						shareTitle: data.title,
						shareLink: `https://dtm.lanbaozixun.com/mobile/pages/product/info?id=${data.id}&invite_code=${this.inviteCode}`,
						shareImage: data.image,
						shareDesc: ''
					}
					
					wechath5.share(option)
					
					let d = {
						content: '产品简介',
						// brokerage: '佣金说明',
						condition: '进件条件',
						flow: '申请流程',
						drawings: '提款流程',
						repayment: '还款流程',
						common_problem: '常见问题',
						customer_service: '专属客户经理',
					}

					for (var k in d) {
						if (!_this.$u.test.isEmpty(_this.information[k])) {
							_this.contentLIsts.push({
								name: d[k],
								type: ['customer_service'].indexOf(k) != -1 ? 'qr_code' : 'html',
								content: _this.information[k]
							})
						}
					}
					
					_this.loadingShowStatus = false;
				}
			},
			async gofast(){
				let s = await this.isVipProduct();
				if(!s)return;
				this.goPage('/pages/product/fast?id='+ this.information.id)
			},
			goPage(link) {
				menuJump({
					is_tab: false,
					link,
					link_type: 1
				})
			},
			async isVipProduct(){
				if(this.information.type == 0){
					await this.getUser();
					if (this.userInfo.is_vip == 0) {
						this.$refs.hintBuyVip.show()
						return false
					}
				}
				return true;
			},
			async recommendationApplicationOne(){
				let s = await this.isVipProduct();
				if(s)this.goPage('/pages/product/fast?id=' + this.information.id)
			},
			async quickApplication(){
				console.log(1)
				const _this = this;
				let s = await _this.isVipProduct();
				if(s){
					if(_this.information.open_type == 1){
						createCustomer({
							id:_this.id
						}).then(res => {
							if (res.code == 1) {
								uni.redirectTo({
									url: '/pages/product/qr_code_tow?id=' + res.data
								})
							} else {
								_this.$u.toast(res.msg);
							}
						})
					}else if([3].indexOf(_this.information.open_type) != -1){
						_this.showService = true
					}
					
				}
			},
			async recommendationApplication() {
				const _this = this;
				let s = await _this.isVipProduct();
				if(!s)return;
				let {
					userInfo,
					information
				} = _this;
				if (information.paid_status == 0) {
					createOrder({
						id:information.buy_item_id
					})
				}else if (information.paid_status == 1) {
					
					if(information.authentication_status == 0){
						uni.navigateTo({
							url:'/pages/user/authentication',
							fail() {
								_this.$u.toast('跳转失败，请完成实名认证');
							}
						})
					}else{
						switch (information.open_type) {
							case 1:
							case 4:
								_this.productApplyFormStatus = true
								break;
							case 3:
								_this.showService = true
								break;
						}
					}
				}
			},
			recommendationApplicationButtonDesc() {
				const _this = this;

				let {
					information
				} = _this;

				let hint = '';
				switch (information.paid_status) {
					case 0:
						hint = (information.buy_price || 0) + '元解锁单次推广'
						break;
					case 1:
						hint = '渠道收单报备信息';
						break;
					default:
						hint = '数据加载中';
						break;
				}
				return hint;
			},
			exploit(){
				return this.$u.toast('功能待开放');
			}
		},
		computed: {
			...mapGetters(["userInfo","inviteCode"]),
		}
	}
</script>
<style lang="scss">
	@import './info.scss'
</style>